<!DOCTYPE html>
<div id="a" contenteditable>foo</div>
<div id="b" contenteditable>foo<span>bar</span></div>
<button id="c">press me</button>
<div id="d" contenteditable>foo <span contenteditable>bar</span></div>
<div id="e" contenteditable>foo <span contenteditable="false">bar <span contenteditable>baz</span></span></div>
<script src="include.js"></script>
<script>
test(() => {
    function reportSelectionAndFocus() {
        const range = getSelection().getRangeAt(0);
        println(`Range: ${range.startContainer} ${range.startOffset} ${range.endContainer} ${range.endOffset}`);
        printElement(document.activeElement);
    }

    println('-- Simple editing host --');
    const divA = document.querySelector('div#a');
    getSelection().setBaseAndExtent(divA.childNodes[0], 1, divA.childNodes[0], 2);
    reportSelectionAndFocus();

    println('-- Editing host with nested <span> --');
    const divB = document.querySelector('div#b');
    getSelection().setBaseAndExtent(divB.childNodes[1].childNodes[0], 1, divB.childNodes[1].childNodes[0], 1);
    reportSelectionAndFocus();

    println('-- Refocusing on same editing host --');
    const buttonElm = document.querySelector('button#c');
    buttonElm.addEventListener('click', () => getSelection().setBaseAndExtent(divB.childNodes[0], 0, divB.childNodes[0], 0));
    const buttonRect = buttonElm.getBoundingClientRect();
    internals.click(buttonRect.left + 5, buttonRect.top + 5);
    reportSelectionAndFocus();

    println('-- Nested editing host --');
    const spanC = document.querySelector('div#d span');
    getSelection().setBaseAndExtent(spanC.childNodes[0], 0, spanC.childNodes[0], 3);
    reportSelectionAndFocus();

    println('-- Nested editing host with uneditable element as parent --');
    const spanD = document.querySelector('div#e span span');
    getSelection().setBaseAndExtent(spanD.childNodes[0], 0, spanD.childNodes[0], 3);
    reportSelectionAndFocus();
});
</script>
